import React, { Component } from 'react';
import {Form, Card, Button, Row, Col,Table} from 'antd';
import BBSService from '../../service/BBSService';
import moment from 'moment'
export default class BBSView extends Component {

    state = {
        title:'BBS详情',
        data:{},
        loading:false,
        formItems: [
            {name: '标题', type: 'text', fieldName: 'title'},
            {name: '图片', type: 'img', fieldName: 'images'},
            {name: '评论数量', type: 'text', fieldName: 'commentCount'},
            {name: '点赞数量', type: 'text', fieldName: 'upvoteCount'},
            {name: '内容', type: 'text', fieldName: 'content'},
            {name: '是否置顶', type: 'text2', fieldName: 'topmost'},
            {name: '创建时间', type: 'text3', fieldName: 'createTime'},
            {name: '更新时间', type: 'text3', fieldName: 'updateTime'},
        ],
    };

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        let id = this.props.match.params.id;
        this.fetch(id);
    }

    fetch(id){
        this.setState({
            loading: true
        });
        BBSService.getOne(id).done((res)=>{
            this.setState({data:res.entity,loading: false});
        });
    }

    //页面渲染
    render() {
        return (
            <Card title={this.state.title}>
                <Form>
                    {this.state.formItems.map((item,i)=>{
                        if(item.type==='text'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]}</span>
                                </div>
                            )
                        }else if(item.type==='text2'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]?'是':'否'}</span>
                                </div>
                            )
                        }else if(item.type==='text3'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]?moment(this.state.data[item.fieldName]).format('YYYY-MM-DD'):''}</span>
                                </div>
                            )
                        }
                        else if(item.type==='img'){
                            let imgArr = this.state.data[item.fieldName]?this.state.data[item.fieldName].split(','):[];
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    {imgArr.length>0?<div className="view-item-imgs-div">{
                                        imgArr.map((item,i)=>{
                                            return(
                                                <img className="view-item-img" key={i} src={item}/>
                                            )
                                    })
                                        }</div>:''}
                                </div>
                            )
                        }
                    })}
                    <div className="view-item">
                        <span className="view-item-name">发表人：</span>
                        {this.state.data.createStudent?<span className="view-item-text">{this.state.data.createStudent.firstName+' '+this.state.data.createStudent.lastName}</span>:''}
                    </div>
                    <Form.Item>
                        <Button type="primary" icon="arrow-left" onClick={()=>{this.props.history.goBack()}}>返回</Button>
                    </Form.Item>
                </Form>
            </Card>
        );
    }
}